<!-- 学习 -->
<template>
	<view>
		<!-- 主导航 -->
		<view class="nav">
			<view class="list" v-for="(k,i) in navList" @click="navAct(k)">
				<text :style="{'color':k.isAct?'#29c563':''}">{{k.name}}</text>
				<view v-show="k.isAct"></view>
			</view>
		</view>
		<!-- 副导航 -->
		<view class="otherNav">
			<view class="son" v-for="(k,i) in otherNav" :class="k.style" @click="$win.show(k.link)">
				{{otherNavText()[i]}}
			</view>
		</view>
		<!-- 科目一四 -->
		<view class="course14" v-if="navList[0].isAct||navList[3].isAct">
			<!-- 顺序练题 -->
			<view class="box">
				<view class="left">
					<view class="son" v-for="(k,i) in practiceL" @click="$win.show(k.link)">
						<image :src="k.pic" mode="aspectFill"></image>
						<text>{{k.text}}</text>
					</view>
				</view>
				<view class="practice center">
					<view class="inside" @click="$win.show('lianti/lianti?type='+'顺序练题')">
						<text>顺序练题</text>
						<text style="font-size: 34rpx;opacity: 0.9;font-weight: 400;margin-top: 22rpx;">0/1246</text>
					</view>
				</view>
				<view class="right">
					<view class="son" v-for="(k,i) in practiceR" @click="$win.show(k.link)">
						<image :src="k.pic" mode="aspectFill"></image>
						<text>{{k.text}}</text>
					</view>
				</view>
			</view>
			<!-- 模拟考试 -->
			<view class="box">
				<view class="left">
					<view class="son" v-for="(k,i) in mockExamL" @click="$win.show(k.link)">
						<image :src="k.pic" mode="aspectFill"></image>
						<text>{{k.text}}</text>
					</view>
				</view>
				<view class="mockExam center">
					<view class="inside" @click="$win.show('monikaoshi/monikaoshi')">
						<text>模拟考试</text>
					</view>
				</view>
				<view class="right">
					<view class="son" v-for="(k,i) in mockExamR" @click="$win.show(k.link)">
						<image :src="k.pic" mode="aspectFill"></image>
						<text>{{k.text}}</text>
					</view>
				</view>
			</view>
			<!-- 题库 -->
			<view class="questionBank" @click="$win.show('../index/index_2')">
				<view class="left">
					<image src="/static/images/icon/study/questionBank.webp" mode="aspectFill"></image>
					<text>我的题库</text>
				</view>
				<view class="right">
					<text>梅州-小车</text>
					<image src="/static/iconfont/right.webp" mode="aspectFill"></image>
				</view>
			</view>

		</view>
		<!-- 科目二三 -->
		<view class="course23" v-else>
			<view class="box2" v-if="navList[1].isAct" @click="$win.show('yuyinbobao/yuyinbobao?title='+'科目二')">
				<view>
					<image src="/static/images/icon/study/yuyin.png" mode="aspectFill"></image>
					<text>语音播报</text>
				</view>
				<image src="/static/iconfont/right.webp" mode="aspectFit"></image>
			</view>
			<view class="box3" v-else>
				<view class="mockExam">
					<view class="out">
						<view class="in" @click="$win.show('monikaoshi2/monikaoshi2')">模拟考试</view>
					</view>
				</view>
				<view class="option" v-for="(k,i) in option" :key="i" @click="$win.show(k.link+'?title='+'科目三')">
					<image :src="k.pic" mode="aspectFill"></image>
					<text>{{k.text}}</text>
				</view>
			</view>
			<view class="videos">
				<view class="title">
					<image src="/static/images/icon/study/shipin.png" mode="aspectFill"></image>
					<text>学车视频</text>
				</view>
				<view class="son" v-for="(k,i) in 5">
					<video
						src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
						class="video" title="倒车入库"></video>
					<text class="name">倒车入库</text>
					<text class="text">指定时间内倒车入库的能力</text>
					<view class="difficulty">
						<text class="t">难度：</text>
						<uni-rate value="4" readonly="true" size="24rpx"></uni-rate>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					name: '科目一',
					isAct: true,
				}, {
					name: '科目二',
					isAct: false,
				}, {
					name: '科目三',
					isAct: false,
				}, {
					name: '科目四',
					isAct: false,
				}],
				// otherNavStyle: ['st', 'nd', 'rd'],
				otherNav: [{
						style: 'st',
						link: 'kaogui/kaogui',
					},
					{
						style: 'nd',
						link: 'datijiqiao/datijiqiao',
					},
					{
						style: 'rd',
						link: 'tubiaoguanli/tubiaoguanli',
					},
				],
				option: [{
						pic: '/static/images/icon/study/dengguang.png',
						text: '灯光模拟',
						link: 'dengguangmoni/dengguangmoni',
					},
					{
						pic: '/static/images/icon/study/yuyin.png',
						text: '语音播报',
						link: 'yuyinbobao/yuyinbobao',
					}
				],
				practiceL: [{
						pic: '/static/images/icon/study/zhuanxianglianxi.webp',
						text: '专项练习',
						link: 'zhuanxianglianxi/zhuanxianglianxi',
					},
					{
						pic: '/static/images/icon/study/cuoti.png',
						text: '我的错题',
						link: 'cuoti/cuoti',
					},
				],
				practiceR: [{
						pic: '/static/images/icon/study/vip.png',
						text: 'VIP课程',
						link: 'vipCourse/vipCourse',
					},
					{
						pic: '/static/images/icon/study/weizuoti.png',
						text: '未做题',
						link: 'weizuoti/weizuoti',
					},
				],

				mockExamL: [{
						pic: '/static/images/icon/study/suijilianxi.png',
						text: '随机练习',
						link: 'suijilianxi/suijilianxi',
					},
					{
						pic: '/static/images/icon/study/shoucang.png',
						text: '我的收藏',
						link: 'shoucang/shoucang',
					},
				],
				mockExamR: [{
					pic: '/static/images/icon/study/chengji.png',
					text: '我的成绩',
					link: 'wodechengji/wodechengji',
				}],
			}
		},
		methods: {
			//nav点击逻辑
			navAct(item) {
				for (let a = 0; a < this.navList.length; a++) {
					this.navList[a].isAct = false
				}
				item.isAct = true
				this.getLink()
			},
			// 副导航栏内容返回
			otherNavText() {
				for (var a = 0; a < this.navList.length; a++) {
					if (this.navList[a].isAct) {
						var string = ''
						if (a === 0 || a === 3) {
							string = (a === 0 ? '科一考规' : '科四考规')
							return [string, '答题技巧', '图标管理']
						} else {
							string = (a === 1 ? '科二考规' : '科三考规')
							return [string, '考试秘籍', '学车技巧']
						}
					}
				}
			},
			//判断跳转链接
			getLink() {
				if (this.navList[0].isAct || this.navList[3].isAct) {
					this.otherNav[1].link = 'datijiqiao/datijiqiao'
					this.otherNav[2].link = 'tubiaoguanli/tubiaoguanli'
				} else {
					this.otherNav[1].link = 'kaoshimiji/kaoshimiji'
					this.otherNav[2].link = 'xuechejiqiao/xuechejiqiao'
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f3f5;
	}

	// 导航栏
	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 88rpx;
		margin-bottom: 4rpx;
		background: #ffffff;

		.list {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 100%;

			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #999999;
			}

			;

			view {
				position: absolute;
				bottom: 0;
				width: 98rpx;
				height: 4rpx;
				background: #29c563;
			}
		}
	}

	// 副导航栏
	.otherNav {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;

		.son {
			margin: 0 3rpx;
			width: 230rpx;
			height: 60rpx;
			border-radius: 2rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			text-align: center;
			color: #f55549;
			line-height: 60rpx;
		}

		;

		.st {
			color: #f55549;
			background: #ffe5e4;
		}

		;

		.nd {
			color: #f59211;
			background: #ffedc5;
		}

		;

		.rd {
			background: #b8f2c6;
			color: #4bb23d;
		}
	}

	//两个主盒子
	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 380rpx;
		background: #ffffff;

		.center {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 248rpx;
			height: 248rpx;
			box-sizing: border-box;
			border-radius: 50%;

			.inside {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 214rpx;
				height: 214rpx;
				border-radius: 50%;

				text {
					font-size: 36rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Medium;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
				}
			}
		}

		;

		.mockExam {
			border: 6rpx solid rgba(73, 194, 245, .2);

			.inside {
				background: linear-gradient(180deg, #49ccf5, #4988f5);
			}
		}

		;

		.practice {
			border: 6rpx solid rgba(66, 206, 80, 0.2);

			.inside {
				background: linear-gradient(134deg, #54d685, #29c563 99%);
			}
		}

		;

		.left,
		.right {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 208rpx;
			height: 320rpx;

			.son {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 160rpx;
				// height: 50%;
				width: 100%;

				image {
					width: 56rpx;
					height: 56rpx;
				}

				;

				text {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: center;
					color: #333333;
				}

				;
			}
		}

		;
	}

	//题库
	.questionBank {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		width: 750rpx;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		background: #ffffff;

		.left,
		.right {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		;

		.left {
			text {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: center;
				color: #333333;
			}

			;

			image {
				width: 34rpx;
				height: 31rpx;
			}

			;
		}

		;

		.right {
			text {
				font-size: 28rpx;
				font-family: Source Han Sans CN, Source Han Sans CN-Regular;
				font-weight: 400;
				text-align: right;
				color: #999999;
			}

			image {
				margin-top: 4rpx;
				width: 20rpx;
				height: 20rpx;
			}

			;
		}
	}

	//科目二三
	.course23 {
		.box2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 750rpx;
			height: 100rpx;
			background: #ffffff;
			padding: 24rpx;
			box-sizing: border-box;

			view {
				display: flex;
				align-items: center;

				image {
					width: 34rpx;
					height: 34rpx;
				}

				text {
					margin-left: 14rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}
			}

			image {
				width: 17rpx;
				height: 17rpx;
			}
		}

		.box3 {
			position: relative;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			width: 750rpx;
			background: #ffffff;

			.mockExam {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 750rpx;
				height: 380rpx;
				background: #ffffff;
				border-bottom: 2rpx solid #ededed;

				.out {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 248rpx;
					height: 248rpx;
					border: 6rpx solid rgba(73, 194, 245, 0.2);
					border-radius: 50%;
					box-sizing: border-box;

					.in {
						width: 214rpx;
						height: 214rpx;
						background: linear-gradient(180deg, #49ccf5, #4988f5);
						border-radius: 50%;
						font-size: 36rpx;
						font-family: Source Han Sans CN, Source Han Sans CN-Medium;
						font-weight: 500;
						text-align: center;
						color: #ffffff;
						line-height: 214rpx;
					}
				}
			}

			.option {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 60rpx;
				box-sizing: border-box;
				margin: 10rpx 0;
				border-left: 1rpx solid #ededed;
				border-right: 1rpx solid #ededed;

				image {
					margin-right: 14rpx;
					width: 34rpx;
					height: 34rpx;
				}

				text {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}
			}

			// &:nth-child(even)::after{
			// 	width: 2rpx;
			// 	height: 60rpx;
			// 	background: #000;
			// }
		}





		.videos {
			display: flex;
			flex-direction: column;
			width: 750rpx;
			margin-top: 20rpx;
			background: #ffffff;

			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 750rpx;
				height: 100rpx;
				padding: 33rpx 24rpx;
				box-sizing: border-box;
				background: #ffffff;

				image {
					margin-right: 14rpx;
					width: 34rpx;
					height: 34rpx;
				}

				text {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}
			}

			.son {
				position: relative;
				margin-left: 24rpx;
				background-color: #fff;
				height: 140rpx;
				padding: 15rpx 0;

				.video {
					position: absolute;
					left: 0;
					top: 0;
					width: 250rpx;
					height: 140rpx;
				}

				.name {
					position: absolute;
					top: 5rpx;
					left: 270rpx;
					line-height: 28rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #333333;
				}

				.text {
					position: absolute;
					top: 51rpx;
					left: 270rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN-Regular;
					font-weight: 400;
					text-align: left;
					color: #999999;
				}

				.difficulty {
					position: absolute;
					bottom: 35rpx;
					left: 270rpx;
					display: flex;
					align-items: center;

					.t {
						font-size: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN-Regular;
						font-weight: 400;
						text-align: left;
						color: #c1c1c1;

					}
				}
			}

		}
	}
</style>
